import React, { Component } from "react";
import { Picker, List } from 'antd-mobile';
import { createForm } from 'rc-form';
import { district, provinceLite } from 'antd-mobile-demo-data';
// 如果不是使用 List.Item 作为 children
const CustomChildren = props => (
    <div
        onClick={props.onClick}
        style={{ backgroundColor: '#fff', paddingLeft: 15 }}
    >
        <div className="test" style={{ display: 'flex', height: '45px', lineHeight: '45px' }}>
            <div style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{props.children}</div>
            <div style={{ textAlign: 'right', color: '#888', marginRight: 15 }}>{props.extra}</div>
        </div>
    </div>
);
class Test extends Component {
    state = {
        data: [],
        pickerValue: [],
        visible: false,
    };
    onClick = () => {
        setTimeout(() => {
            this.setState({
                data: provinceLite,
            });
        }, 120);
    };
    render() {
        return (
            <List style={{ backgroundColor: 'white' }} className="picker-list">
                <Picker
                    title="选择地区"
                    extra="请选择(可选)"
                    data={district}
                    value={this.state.pickerValue}
                    onChange={v => this.setState({ pickerValue: v })}
                    onOk={v => this.setState({ pickerValue: v })}
                >
                    <CustomChildren>Customized children</CustomChildren>
                </Picker>
            </List>
        );
    }
}
const TestWrapper = createForm()(Test);
export default TestWrapper
